import React, { Component } from 'react'
import { register } from '../../redux/actions'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
// 引入antd组件
import {
  NavBar,
  WingBlank,
  WhiteSpace,
  List,
  InputItem,
  Radio,
  Button, Icon,
} from 'antd-mobile'
import Logo from '../../components/Logo/Logo'
import './Register.styl'
// 获取List组件中的表单控件
// const ListItem = List.Item
const RadioItem = Radio.RadioItem

class Register extends Component {
  // 定义初始值
  state = {
    username: '',
    password: '',
    confirmPassword: '',
    type: 'dashen',
  }
  
  render () {
    // 表单输入完整性验证 有一项没有输入就disabled不能提交
    let {type, username, password, confirmPassword} = this.state
    let disabledSub = true
    if (username && password && confirmPassword && type) {
      disabledSub = false
    }
    let {code, msg, redirectTo , reg} = this.props.user.data
    // console.log(this.props.user.data)
    if (redirectTo ) {
     //  如有redirectTo有值那么重定向到这个值的路由
     return <Redirect to={redirectTo} />
    }
    
    return (
      <div className="register-warp">
        <NavBar className="navbar">BOSS直聘</NavBar>
        <Logo/>
        {/* 两侧留白组件 */}
        <WingBlank>
          
          
          <List renderHeader={() => '注册'}>
            {msg && !reg
              ? <div
                className={code === 0 ? 'success-msg' : 'error-msg'}>
                {/*错误提示信息*/}
                <Icon type="cross-circle-o" />
                {msg}</div>
              : null}
            <WhiteSpace/>
            
            <InputItem
              onChange={value => this.handlerChange('username', value)}
              placeholder='输入用户名'
            >
              用户名
            </InputItem>
            <WhiteSpace/>
            <InputItem
              placeholder='输入密码'
              type="password"
              onChange={value => this.handlerChange('password', value)}
            >
              密&nbsp;&nbsp;&nbsp;码
            </InputItem>
            <WhiteSpace/>
            <InputItem
              type="password"
              onChange={value => this.handlerChange('confirmPassword', value)}
              placeholder='确认密码'
            >
              确认密码
            </InputItem>
            <WhiteSpace/>
            {/* 单选框 */}
            {/* 单选框是否被选中取决于userType */}
            <RadioItem
              checked={type === 'dashen'}
              onChange={value => this.handlerChange('type', 'dashen')}
            >
              {' '}
              &nbsp;&nbsp;我是大神
            </RadioItem>
            
            <RadioItem
              checked={type === 'boss'}
              onChange={value => this.handlerChange('type', 'boss')}
            >
              {' '}
              &nbsp;&nbsp;我是BOSS
            </RadioItem>
            
            <WhiteSpace/>
            <Button type="primary"
                    disabled={disabledSub}
                    onClick={() => this.register()}>
              注册
            </Button>
            <WhiteSpace/>
            <Button type="ghost" onClick={this.toLogin}>
              已有账号
            </Button>
            <WhiteSpace/>
          </List>
        </WingBlank>
      </div>
    )
  }
  
  // 输入或选择 改变stata信息
  handlerChange (name, value) {
    // console.log(name, value)
    // 拿到值后改变 []语法用来动态改变对象的key，中括号功能强大，可以是变量 那么key就是变量的值
    this.setState({
      [name]: value,
    })
  }
  
  // 注册提交函数
  register () {
    // 解构stata 收集state信息
    // let {username, password, confirmPassword, userType} = this.state
    
    // console.log(this.state)
    
    // dispatch一个action提交注册
    this.props.register(this.state)
  }

// 跳转登录页面的函数
  toLogin = () => {
    // console.log('跳转')
    this.props.history.replace('/login')
  }
}

// 将组件和store连接
export default connect(
//   返回映射state
  state => ({user: state.user}),
  //  注入action 组件可以从this.props中得到action函数
  {register},
)(Register)